<template>
	<view class="user_content" :style="{ height: `calc(100vh - ${statusBarHeight}rpx)` }">
		<scroll-view style="height: 100%;" scroll-y="true">
			<!--  -->
			<view class="custom_box">
				<view class="menu_item" v-for="(item, index) in menusList" :key="index">
					<view class="menu_item_box" @click="handleGoPages(item)">
						<view class="menu_icon">
							<text class="iconfont" :class="item.icon"></text>
						</view>
						<view class="menu_name">{{ item.name }} </view>
					</view>
				</view> 
			</view>
			<!--  -->
		
		</scroll-view>
		
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight: 0,
				menusList: [
					{ name: '订单详情', icon: 'icon-dingdanxiangqing', path: '../user/ordersTable', param: '', isScan: false },
					// ../user/sffh
					{ name: '已发货/未发货', icon: 'icon-yifahuodefuben', path: '', param: '', isScan: false },
					// ../user/ddsh
					{ name: '已审核/未审核', icon: 'icon-shenhe1', path: '', param: '', isScan: false },
					{ name: '应付款', icon: 'icon-yingfukuan01', path: '', param: '', isScan: false },

					{ name: '实时对账单', icon: 'icon-yingfudan-03', path: '', param: '', isScan: false },
					{ name: '个人资料', icon: 'icon-wode', path: '../../pages/login/personalInfo', param: '', isScan: false },
					{ name: '修改密码', icon: 'icon-shezhi', path: '', param: '', isScan: false },
					{ name: '退出登录', icon: 'icon-tuichu', path: '../../pages/login/login2', param: '', isScan: false },
				],
				obj: {
					'退出登录': (item) => {
						uni.showModal({
                            title: '提示',
                            content: '是否注销用户',
                            success: (res) => {
                                if (res.confirm) {
                                    uni.removeStorageSync('token');
                                    uni.removeStorageSync('loginData');
                                    uni.redirectTo({
                                        url: item.path
                                    })
                                }
                            }
                        });
					}
				}
			}
		},
        created() { // 子组件 onLoad 不生效
			this.statusBarHeight = this.$globalMap.statusBarHeight
            console.log('== height user ', this.statusBarHeight)

		},
		methods: {
			handleGoPages(item) {
				console.log('== item ', item)
				if (!!item.isScan) {

				} else if (!!item.path) {
					console.log('== path ',item.path )
					if (this.obj[item.name]) {
						this.obj[item.name](item)
						return
					}
					
					uni.navigateTo({
						url: `${item.path}?param=${item.param}`
					})
				}
			},
		}
	}
</script>

<style lang="less" scoped>
.user_content {
    height: 100vh;
    background: #f5f5f5;

	.custom_box {
		display: flex;
		flex-wrap: wrap;
		overflow: hidden;
		background: #f5f5f5;

		.menu_item {
			width: 24.6%;
			padding: 1rpx;
			overflow: hidden;
			background: #f5f5f5;

			.menu_item_box {
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				background: #fff;
				height: 210rpx;
				border-radius: 5rpx;
				overflow: hidden;
				padding: 0 5rpx;
				margin: 5rpx 10rpx;

				.menu_icon {
					width: 100rpx;
					height: 100rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					border: 2rpx solid #fb8905;
					border-radius: 50%;
					margin-bottom: 30rpx;

					.iconfont {
						font-size: 45rpx;
						color: #fb8905;
					}
				}

				.menu_name {
					width: 100%;
					text-align: center;
					color: #f9a94d;
					font-size: 20rpx;
					white-space: nowrap;           /* 不换行 */
					overflow: hidden;              /* 隐藏超出的文本 */
					text-overflow: ellipsis;       /* 超出的部分显示省略号 */
				}
			}
		}
	}
}
</style>
